<?php
header("Content-type:text/html; charset=utf-8");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一叶书签</title>
<link rel="shortcut icon" href="./favicon.ico" />
<link rel="bookmark" href="./favicon.ico" />
<base target="_blank"/>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
<script src="/static/js/axios@0.19.0.js"></script><script src="/static/js/qs@6.7.0.js"></script>
<style type="text/css">
body {font-family:SimHei}
</style>
</head>
<body>
<div id="vue_app">
<el-container>
<el-header>
<el-row style="border-bottom: 1px solid green">
  <el-col :span="20">
    <img src="./leaf.png" alt="枫叶" height="60px"/>
  </el-col>
  <el-col :span="4">
    <el-button v-on:click="logout">退出</el-button>
    <el-button v-on:click="chgPwd">改密</el-button>
  </el-col>
</el-row>
</el-header>
<el-main>
<el-row>
  <el-col :span="2">&nbsp;</el-col>
  <el-col :span="20" style="border-left: 1px solid green; border-right: 1px solid green">
  <div>
    <ul>
      <li>
        <i class="el-icon-folder-add"
          v-on:click="dirAdd(rootdir)"
          @dragenter="allowDrop($event)"
          @dragover="allowDrop($event)"
          @dragleave="allowDrop($event)"
          @drop="dirDrop($event, rootdir)"></i>
        <i class="el-icon-document-add"
          v-on:click="filAdd(rootdir)"
          @dragenter="allowDrop($event)"
          @dragover="allowDrop($event)"
          @dragleave="allowDrop($event)"
          @drop="filDrop($event, rootdir)"></i>
      </li>
      <dir v-for="dir in rootdir.subdir"
        :data="dir"
        :diradd="dirAdd"
        :diredit="dirEdit"
        :dirdelete="dirDelete"
        :filadd="filAdd"
        :filedit="filEdit"
        :fildelete="filDelete"
        :dragdirstart="dragDirStart"
        :dragfilstart="dragFilStart"
        :dragallend="dragEnd"
        :allowdrop="allowDrop"
        :dirdrop="dirDrop"
        :fildrop="filDrop"></dir>
      <li v-for="link in rootdir.fil">
        <i class="el-icon-document"
          draggable="true"
          @dragstart="dragFilStart($event, link)"
          @dragend="dragEnd($event)"></i>
        <a :href="link.link">{{link.name}}</a>
        <i class="el-icon-edit" v-on:click="filEdit(link)"></i>
        <i class="el-icon-delete" v-on:click="filDelete(link)"></i>
      </li>
    </ul>
  </div>
  </el-col>
  <el-col :span="2">&nbsp;</el-col>
</el-row>
</el-main>
<el-footer>
<el-row>
  <el-col :span="20">
  </el-col>
  <el-col :span="4">
  </el-col>
</el-row>
</el-footer>
</el-container>
<el-dialog
  :visible.sync="dialog.chgPwdVisible"
  width="30%">
  <el-input v-model="dialog.oldPassword" placeholder="旧密码" show-password></el-input>
  <el-input v-model="dialog.newPassword" placeholder="新密码" show-password></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogChgPwd">修 改</el-button>
  </span>
</el-dialog>
<el-dialog
  :visible.sync="dialog.addDirVisible"
  width="30%">
  <el-input v-model="dialog.dirNameEdit" placeholder="文件夹名字"></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogDirAdd">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  :visible.sync="dialog.editDirVisible"
  width="30%">
  <el-input v-model="dialog.dirNameEdit" placeholder="文件夹名字"></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogDirEdit">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  :visible.sync="dialog.addFilVisible"
  width="30%">
  <el-input v-model="dialog.filNameEdit" placeholder="网页标题"></el-input>
  <el-input v-model="dialog.filLinkEdit" placeholder="网页路径" @change="getTitle(dialog.filLinkEdit)"></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogFilAdd">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  :visible.sync="dialog.editFilVisible"
  width="30%">
  <el-input v-model="dialog.filNameEdit" placeholder="网页标题"></el-input>
  <el-input v-model="dialog.filLinkEdit" placeholder="网页路径"></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogFilEdit">确 定</el-button>
  </span>
</el-dialog>
</div>
</body>
<script type="text/javascript">
Vue.component('dir', {
  data: function () {
    return {
      open: false
    }
  },
  props: {
    data:Object,
    diradd:Function,
    diredit:Function,
    dirdelete:Function,
    filadd:Function,
    filedit:Function,
    fildelete:Function,
    dragdirstart:Function,
    dragfilstart:Function,
    dragallend:Function,
    allowdrop:Function,
    dirdrop:Function,
    fildrop:Function
  },
  template:
  '<li>\
    <i class="el-icon-folder"\
      draggable="true"\
      @dragstart="dragdirstart($event, data)"\
      @dragend="dragallend($event)"></i>\
    <span v-on:click="open = !open">\
      {{data.name}}\
    </span>\
    <i class="el-icon-folder-add"\
      v-on:click="diradd(data)"\
      @dragenter="allowdrop($event)"\
      @dragover="allowdrop($event)"\
      @dragleave="allowdrop($event)"\
      @drop="dirdrop($event, data)"></i>\
    <i class="el-icon-edit" v-on:click="diredit(data)"></i>\
    <i class="el-icon-delete" v-on:click="dirdelete(data)"></i>\
    <i class="el-icon-document-add"\
      v-on:click="filadd(data)"\
      @dragenter="allowdrop($event)"\
      @dragover="allowdrop($event)"\
      @dragleave="allowdrop($event)"\
      @drop="fildrop($event, data)"></i>\
    <ul v-if="open">\
      <dir v-for="dir in data.subdir"\
        :data="dir"\
        :diradd="diradd"\
        :diredit="diredit"\
        :dirdelete="dirdelete"\
        :filadd="filadd"\
        :filedit="filedit"\
        :fildelete="fildelete"\
        :dragdirstart="dragdirstart"\
        :dragfilstart="dragfilstart"\
        :dragallend="dragallend"\
        :allowdrop="allowdrop"\
        :dirdrop="dirdrop"\
        :fildrop="fildrop"></dir>\
      <li v-for="link in data.fil">\
        <i class="el-icon-document"\
          draggable="true"\
          @dragstart="dragfilstart($event, link)"\
          @dragend="dragallend($event)"></i>\
        <a :href="link.link">{{link.name}}</a>\
        <i class="el-icon-edit" v-on:click="filedit(link)"></i>\
        <i class="el-icon-delete" v-on:click="fildelete(link)"></i>\
      </li>\
    </ul>\
  </li>'
});

let vm = new Vue({
  el: '#vue_app',
  data: {
    dialog: {
      dirIdEdit:0,
      dirNameEdit:"",
      dirIdParent:0,
      addDirVisible:false,
      editDirVisible:false,

      filIdEdit:0,
      filNameEdit:"",
      filLinkEdit:"",
      filIdParent:0,
      addFilVisible:false,
      editFilVisible:false,

      oldPassword:"",
      newPassword:"",
      chgPwdVisible:false,
    },
    dropOperate: {
      dropType:"",
      dropData:null,
      dropDire:null
    },
    rootdir:<?php echo json_encode($bookmark); ?>,
    url:""
  },
  oncreate: function () {
    this.url = window.location.href;
  },
  methods: {
    chgPwd: function() {
      that = this;
      this.dialog.oldPassword = "",
      this.dialog.newPassword = "";
      this.dialog.chgPwdVisible = true;
    },
    dialogChgPwd: function() {
      that = this;
      data = Qs.stringify({
        reqpath:"chgPwd",
        oldPassword:this.dialog.oldPassword,
        newPassword:this.dialog.newPassword
      });
      config = {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      };
      axios.post(this.url, data, config).then(function(res) {
        let response = res.data;
        if(response.code == 0){
          window.location.reload();
        }
      });
      this.dialog.oldPassword = "",
      this.dialog.newPassword = "";
      this.dialog.chgPwdVisible = false;
    },
    logout: function() {
      that = this;
      data = Qs.stringify({
        reqpath:"logout"
      });
      config = {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      };
      axios.post(this.url, data, config).then(function(res) {
        let response = res.data;
        if(response.code == 0){
          window.location.reload();
        }
      });
    },
    //Bookmark Edit Function
    dirAdd: function(dir) {
      this.dialog.dirIdEdit = 0,
      this.dialog.dirNameEdit = "";
      this.dialog.dirIdParent = dir.id;
      this.dialog.addDirVisible = true;
    },
    dialogDirAdd: function() {
      that = this;
      data = Qs.stringify({
        reqpath:"dirAdd",
        dirNameEdit:this.dialog.dirNameEdit,
        dirIdParent:this.dialog.dirIdParent
      });
      config = {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      };
      axios.post(this.url, data, config).then(function(res) {
        let response = res.data;
        if(response.code == 0){
          that.rootdir = response.data;
        }
      });
      this.dialog.dirIdEdit = 0,
      this.dialog.dirNameEdit = "";
      this.dialog.dirIdParent = 0;
      this.dialog.addDirVisible = false;
    },
    dirEdit: function(dir) {
      this.dialog.dirIdEdit = dir.id,
      this.dialog.dirNameEdit = dir.name;
      this.dialog.dirIdParent = 0;
      this.dialog.editDirVisible = true;
    },
    dialogDirEdit: function() {
      that = this;
      data = Qs.stringify({
        reqpath:"dirEdit",
        dirIdEdit:this.dialog.dirIdEdit,
        dirNameEdit:this.dialog.dirNameEdit
      });
      config = {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      };
      axios.post(this.url, data, config).then(function(res) {
        let response = res.data;
        if(response.code == 0){
          that.rootdir = response.data;
        }
      });
      this.dialog.dirIdEdit = 0,
      this.dialog.dirNameEdit = "";
      this.dialog.dirIdParent = 0;
      this.dialog.editDirVisible = false;
    },
    dirDelete: function(dir) {
      that = this;
      this.$confirm('确认删除 ' + dir.name, {
        confirmButtonText: '确定',
      }).then(() => {
        data = Qs.stringify({
          reqpath:"dirDel",
          dirIdEdit:dir.id,
        });
        config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        };
        axios.post(this.url, data, config).then(function(res) {
          let response = res.data;
          if(response.code == 0){
            that.rootdir = response.data;
          }
        });
      }).catch(() => {});
    },
    filAdd: function(dir) {
      this.dialog.filIdEdit = 0,
      this.dialog.filNameEdit = "";
      this.dialog.filLinkEdit = "";
      this.dialog.filIdParent = dir.id;
      this.dialog.addFilVisible = true;
    },
    dialogFilAdd: function() {
      that = this;
      data = Qs.stringify({
        reqpath:"filAdd",
        filNameEdit:this.dialog.filNameEdit,
        filLinkEdit:this.dialog.filLinkEdit,
        filIdParent:this.dialog.filIdParent
      });
      config = {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      };
      axios.post(this.url, data, config).then(function(res) {
        let response = res.data;
        if(response.code == 0){
          that.rootdir = response.data;
        }
      });
      this.dialog.filIdEdit = 0,
      this.dialog.filNameEdit = "";
      this.dialog.filLinkEdit = "";
      this.dialog.filIdParent = 0;
      this.dialog.addFilVisible = false;
    },
    filEdit: function(link) {
      this.dialog.filIdEdit = link.id,
      this.dialog.filNameEdit = link.name;
      this.dialog.filLinkEdit = link.link;
      this.dialog.filIdParent = 0;
      this.dialog.editFilVisible = true;
    },
    dialogFilEdit:function() {
      that = this;
      data = Qs.stringify({
        reqpath:"filEdit",
        filIdEdit:this.dialog.filIdEdit,
        filNameEdit:this.dialog.filNameEdit,
        filLinkEdit:this.dialog.filLinkEdit,
      });
      config = {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      };
      axios.post(this.url, data, config).then(function(res) {
        let response = res.data;
        if(response.code == 0){
          that.rootdir = response.data;
        }
      });
      this.dialog.filIdEdit = 0,
      this.dialog.filNameEdit = "";
      this.dialog.filLinkEdit = "";
      this.dialog.filIdParent = 0;
      this.dialog.editFilVisible = false;
    },
    filDelete: function(link) {
      that = this;
      this.$confirm('确认删除 ' + link.name, {
        confirmButtonText: '确定',
      }).then(() => {
        data = Qs.stringify({
          reqpath:"filDel",
          filIdEdit:link.id,
        });
        config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        };
        axios.post(this.url, data, config).then(function(res) {
          let response = res.data;
          if(response.code == 0){
            that.rootdir = response.data;
          }
        });
      }).catch(() => {});
    },
    //Drop Function
    dragFilStart: function(event, link){
      event.dataTransfer.setData("data", link.id);
      this.dropOperate.dropType = "filDrop";
      this.dropOperate.dropData = link;
      this.dropOperate.dropDire = null;
    },
    dragDirStart: function(event, dir){
      event.dataTransfer.setData("data", dir.id);
      this.dropOperate.dropType = "dirDrop";
      this.dropOperate.dropData = dir;
      this.dropOperate.dropDire = null;
    },
    dragEnd: function(event) {
      //event.dataTransfer.clearData();
    },
    allowDrop: function(event) {
      event.preventDefault();
    },
    filDrop: function(event, dir) {
      that = this;
      event.preventDefault();
      if(this.dropOperate.dropType === "filDrop"){
        data = Qs.stringify({
          reqpath:"filDrop",
          cuFilId:this.dropOperate.dropData.id,
          toDirId:dir.id,
        });
        config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        };
        axios.post(this.url, data, config).then(function(res) {
          let response = res.data;
          if(response.code == 0){
            that.rootdir = response.data;
          }
        });
      }
      this.dropOperate.dropType = "";
      this.dropOperate.dropData = null;
      this.dropOperate.dropDire = null;
    },
    dirDrop: function(event, dir) {
      that = this;
      event.preventDefault();
      //后台需要注意目标路径不为操作路径或其子路径
      if(this.dropOperate.dropType === "dirDrop"){
        data = Qs.stringify({
          reqpath:"dirDrop",
          cuDirId:this.dropOperate.dropData.id,
          toDirId:dir.id,
        });
        config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        };
        axios.post(this.url, data, config).then(function(res) {
          let response = res.data;
          if(response.code == 0){
            that.rootdir = response.data;
          }
        });
      }
      this.dropOperate.dropType = "";
      this.dropOperate.dropData = null;
      this.dropOperate.dropDire = null;
    },
    getTitle: function(url) {
      console.log(url);
      that = this;
      data = Qs.stringify({
        reqpath:"getTtl",
        tgetUrl:url,
      });
      config = {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      };
      axios.post(this.url, data, config).then(function(res) {
        let response = res.data;
        if(response.code == 0){
          that.dialog.filNameEdit = response.data;
        }
      });
    },
  }
});
</script>
<style>
html,body{height:100%;width:100%;margin:0;padding:0;background:#EAEAEF;}
li{list-style:none}
a{text-decoration:none}
ul,li{padding-left:7px}
</style>
</html>
